import { memo, useEffect } from 'react';
import type { ReactNode, FC } from 'react';
import { RankingLeft, RankingRight, RankingWrapper } from './style';
import { useAppDispatch } from '@/store/hooks';
import { fetchRankDetail, fetchTopList } from './store/rank';
import RankTopList from './c-cpns/rankTopList';
import RankDetaile from './c-cpns/rankDetaile';
interface IProps {
  children?: ReactNode;
}

const Ranking: FC<IProps> = (props) => {
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(fetchTopList());
  }, []);
  return (
    <RankingWrapper className="w980 wrap-bg3">
      <RankingLeft>
        <RankTopList></RankTopList>
      </RankingLeft>
      <RankingRight>
        <RankDetaile></RankDetaile>
      </RankingRight>
    </RankingWrapper>
  );
};

export default memo(Ranking);
